﻿<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
    <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>jQuery.Print</title>
        <meta name="description" content="jQuery.print is a plugin for printing specific parts of a page">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/normalize.min.css">
        <style type='text/css'>
        .a {
            background: black;
            color: white;
        }
        .b {
            color: #aaa;
        }
        </style>
        <!--[if lt IE 9]>
        <script src="js/vendor/html5-3.6-respond-1.1.0.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <!--[if lt IE 9]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
        <h3><a href="https://github.com/DoersGuild/jQuery.print" id="view-on-github" class="btn"><span>View jQuery.print on GitHub</span></a></h3>
        <div id="content_holder">
            <div id="ele1" class="a">
                <h3>Element 1</h3>
                <p>
                Some random text.
                <input type="text" value="Dummy input text" />
                </p>
                <button class="print-link no-print" onclick="jQuery('#ele1').print()">
                Print this (jQuery('#ele1').print())
                </button>
            </div>
            <div id="ele2" class="b">
                <h3>Element 2</h3>
                <p>
                Some other random text.
                </p>
                <button class="print-link no-print">
                Print this ($.print("#ele2")) and skip the button (.no-print)
                </button>
            </div>
            <div id="ele3" class="a">
                <h3>Element 3</h3>
                <p class="no-print">
                Some more random text that is not to be printed.
                </p>
                <button class="print-link" onclick="jQuery.print('#ele3')">
                Print this (jQuery.print('#ele3'))
                </button>
            </div>
            <div id="ele4" class="b">
                <h3 class='avoid-this'>Element 4</h3>
                <p>
                Some really random text.
                </p>
                <pre><code>
                $("#ele4").find('button').on('click', function() {
                    //Print ele4 with custom options
                    $("#ele4").print({
                        //Use Global styles
                        globalStyles : false,
                        //Add link with attrbute media=print
                        mediaPrint : false,
                        //Custom stylesheet
                        stylesheet : "http://fonts.googleapis.com/css?family=Inconsolata",
                        //Print in a hidden iframe
                        iframe : false,
                        //Don't print this
                        noPrintSelector : ".avoid-this",
                        //Add this at top
                        prepend : "Hello World!!!<br/>",
                        //Add this on bottom
                        append : "<br/>Buh Bye!",
                        //Log to console when printing is done via a deffered callback
                        deferred: $.Deferred().done(function() { console.log('Printing done', arguments); })
                    });
                });
                </code></pre>
                <button class="print-link avoid-this">
                Print this in a new window, without this button and the title
                </button>
            </div>
            <br/>
            <button class="print-link" onclick="jQuery.print()">
            Print page - jQuery.print()
            </button>
        </div>
        <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
        <script src="js/jquery-2.1.4.min.js"></script>
        <script>
        window.jQuery || document.write('<script src="../bower_components/jquery/dist/jquery.min.js"><\/script>')
        </script>
        <script src="../jQuery.print.js"></script>
        <script type='text/javascript'>
        //<![CDATA[
        jQuery(function($) { 'use strict';
            $("#ele2").find('.print-link').on('click', function() {
                //Print ele2 with default options
                $.print("#ele2");
            });
            $("#ele4").find('button').on('click', function() {
                //Print ele4 with custom options
                $("#ele4").print({
                    //Use Global styles
                    globalStyles : false,
                    //Add link with attrbute media=print
                    mediaPrint : false,
                    //Custom stylesheet
                    stylesheet : "http://fonts.googleapis.com/css?family=Inconsolata",
                    //Print in a hidden iframe
                    iframe : false,
                    //Don't print this
                    noPrintSelector : ".avoid-this",
                    //Add this at top
                    prepend : "Hello World!!!<br/>",
                    //Add this on bottom
                    append : "<br/>Buh Bye!",
                    //Log to console when printing is done via a deffered callback
                    deferred: $.Deferred().done(function() { console.log('Printing done', arguments); })
                });
            });
            // Fork https://github.com/sathvikp/jQuery.print for the full list of options
        });
        //]]>
        </script>
    </body>
</html>
